<template>
  <div>
    <vxe-modal
      :title="modalTitle"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="800px"
      height="400px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
    >
      <!-- 主体部分： form 表单 -->
      <el-form ref="refForm" :model="formData" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item-plus
              :label="$t('menu.dev.action.field.tab_config', '表单选项卡')"
              :tooltipContent="
                $t(
                  'menu.dev.action.tip.tab_config',
                  '表单中的字段可以分别在不同的选项卡中显示,其中详情类方法默认显示编号和创建时间等内置字段',
                )
              "
              prop="config.fields.tab_config"
            >
              <ra-tab-field
                v-model="formData.config.fields.tab_config"
                :fieldsList="tabFields"
              ></ra-tab-field>
            </el-form-item-plus>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item-plus
              :label="$t('menu.dev.action.field.span', '表单布局')"
              :tooltipContent="
                $t(
                  'menu.dev.action.tip.span',
                  '表单中的字段布局，如一行两列，一行三列等',
                )
              "
              prop="config.fields.span"
            >
              <el-select v-model="formData.config.fields.span">
                <el-option :value="24" label="一行一列"></el-option>
                <el-option :value="12" label="一行二列"></el-option>
                <el-option :value="8" label="一行三列"></el-option>
              </el-select>
            </el-form-item-plus>
          </el-col>
        </el-row>
      </el-form>

      <!-- footer -->
      <template #footer>
        <div>
          <el-button type="info" @click="cancelHandler">
            {{ $t('common.action.cancel', '取消') }}
          </el-button>
          <el-button type="warning" @click="resetHandler">
            {{ $t('common.action.reset', '重置') }}
          </el-button>
          <el-button type="primary" @click="submitHandler" :disabled="loading">
            {{ $t('common.action.confirm', '确定') }}
          </el-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup>
// 设置选项式 API 的内容
defineOptions({
  // 组件名称
  name: 'DevActionUpdate',
  // 阻止透传非 props 属性
  inheritAttrs: false,
});

// 引入API
import ActionAPI from '@/api/admin/dev/action';

// 引入工具函数
import { clone } from 'xe-utils';
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';
import { useRoute } from 'vue-router';

// 引入组合函数
import { useFormData } from './composables/useFormData.js';
import { ElMessage } from 'element-plus';

// 使用组合函数
const { formData, resetForm } = useFormData();

// 定义可触发事件
const emit = defineEmits(['reload']);

const route = useRoute();
const modalTitle = '设置表单配置';
const loading = ref(false);
const show = ref(false);
const tabFields = ref([]);

// 提交操作（统一处理新增和编辑）
const submitHandler = async () => {
  console.log('Submit Handler', formData.value);
  const postData = clone(formData.value);
  console.log('Form Data :', postData);
  const result = await ActionAPI.update(postData);
  if (result.success) {
    emit('reload');
    ElMessage.success(result.message);
  }
  show.value = false;
};

// 取消操作
const cancelHandler = () => {
  resetForm();
  show.value = false;
};

// 重置表单操作
const resetHandler = () => {
  resetForm();
};

/**
 * 暴露方法
 */
defineExpose({
  /**
   * @param params
   * menu_id: route.query.id,
   * app: route.query.app,
   * id: row.id,
   */
  async show(params) {
    const { data: tabField } = await ActionAPI.getConfigOptions();
    tabFields.value = tabField;
    const { data: form } = await ActionAPI.getFormData({ id: params.id });
    console.log('getFormData', form);
    Object.assign(formData.value, form);
    show.value = true;
  },
});
</script>

<style lang="scss" scoped>
.form-section {
  margin: 5px;
  border: 1px solid #dcdfe6;
  padding: 5px;
  border-radius: 4px;
}
</style>
